<template>
  <div class="settingPage">
    <div class="menuVue">
      <div class="menu" :class="{ active: current === 0 }" @click="change(0)">自动回复</div>
      <div class="menu" :class="{ active: current === 1 }" @click="change(1)">常见问题</div>
      <div class="menu" :class="{ active: current === 2 }" @click="change(2)">快捷回复</div>
      <div class="menu" :class="{ active: current === 3 }" @click="change(3)">会话超时</div>
      <div class="menu" :class="{ active: current === 4 }" @click="change(4)">客服评价</div>
      <div class="menu" :class="{ active: current === 5 }" @click="change(5)">更多设置</div>
    </div>
    <!-- 自动回复 -->
    <div class="menuContent">
      <template v-if="current === 0">
        <div class="flex">
          <span>首句欢迎语</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-switch
              v-model="info.isOpenFirstSentence"
              active-color="#13ce66"
              inactive-color="#ececec"
              :width="40"
            ></el-switch>
            <div style="padding: 20px 0; color: #999">
              当买家发送的第一条消息分配到人工接待时，自动发送设置好的回复。
            </div>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              resize="none"
              :rows="5"
              v-model="info.firstSentence"
              style="width: 50%"
            >
            </el-input>
          </div>
        </div>
        <div class="flex" style="margin-top: 30px">
          <span>排队提醒语</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-switch
              v-model="info.isOpenQueueReminder"
              active-color="#13ce66"
              inactive-color="#ececec"
              :width="40"
            ></el-switch>
            <div style="padding: 20px 0; color: #999">客服都不在线或没有接待余量，自动发送设置好的回复。</div>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              resize="none"
              :rows="5"
              v-model="info.queueReminder"
              style="width: 50%"
            >
            </el-input>
          </div>
        </div>
        <div class="flex" style="margin-top: 30px">
          <span>下班后提醒</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-switch
              v-model="info.isOpenOffWorkReminder"
              active-color="#13ce66"
              inactive-color="#ececec"
              :width="40"
            ></el-switch>
            <div style="padding: 20px 0; color: #999">所有客服处于非工作时间离线时，自动发送设置好的回复。</div>
            <el-input
              type="textarea"
              v-model="info.offWorkReminder"
              placeholder="请输入内容"
              resize="none"
              :rows="5"
              style="width: 50%"
            ></el-input>
          </div>
        </div>
        <div class="submit" @click="updateFun">保存</div>
      </template>

      <!-- 常见问题 -->
      <template v-if="current === 1">
        <div class="flex-between align-center">
          <div class="flex align-center flex-1">
            <div>关键字</div>
            <el-input
              placeholder="请输入"
              :clearable="true"
              v-model="keywords"
              style="width: 240px; margin-left: 15px"
              @clear="
                page = 1;
                getQuestionList();
              "
            ></el-input>
            <div
              class="btn"
              @click="
                page = 1;
                getQuestionList();
              "
            >
              查询
            </div>
          </div>
          <div
            class="add"
            @click="
              dialogTableVisible = true;
              title = '新增常见问题';
            "
          >
            新增常见问题
          </div>
        </div>
        <div class="tableList">
          <div class="thVue">
            <div class="th">排序</div>
            <div class="th">问题</div>
            <div class="th">回答</div>
            <div class="th">发布时间</div>
            <div class="th">操作</div>
          </div>
          <div class="tdVue">
            <div class="tdItem" v-for="(item, index) in quList" :key="index">
              <div class="td">{{ item.sort }}</div>
              <div class="td">{{ item.title }}</div>
              <div class="td">{{ item.content }}</div>
              <div class="td">{{ item.createTime }}</div>
              <div class="td">
                <span
                  style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px"
                  @click="
                    title = '编辑常见问题';
                    dialogTableVisible = true;
                    querForm = JSON.parse(JSON.stringify(item));
                  "
                  >编辑</span
                >
                <span
                  style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px"
                  @click="toDelete(item.id, 'question')"
                  >删除</span
                >
              </div>
            </div>
          </div>
          <div class="paginationVue">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="limit"
              @current-change="pageChange"
            ></el-pagination>
          </div>
        </div>
      </template>

      <!-- 快捷回复 -->
      <template v-if="current === 2">
        <div class="flex-between align-center">
          <div class="flex align-center flex-1">
            <div>关键字</div>
            <el-input
              placeholder="请输入"
              :clearable="true"
              v-model="keywords"
              style="width: 240px; margin-left: 15px"
              @clear="
                page = 1;
                getReplyList();
              "
            ></el-input>
            <div
              class="btn"
              @click="
                page = 1;
                getReplyList();
              "
            >
              查询
            </div>
          </div>
          <div
            class="add"
            @click="
              dialogTableVisible10 = true;
              title = '新增快捷回复';
            "
          >
            新增快捷回复
          </div>
        </div>
        <div class="tableList">
          <div class="thVue">
            <div class="th">关键词</div>
            <div class="th">回答</div>
            <div class="th">发布时间</div>
            <div class="th">操作</div>
          </div>
          <div class="tdVue">
            <div class="tdItem" v-for="(item, index) in replyList" :key="index">
              <div class="td">{{ item.title }}</div>
              <div class="td">{{ item.content }}</div>
              <div class="td">{{ item.createTime }}</div>
              <div class="td">
                <span
                  style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px"
                  @click="
                    title = '编辑快捷回复';
                    dialogTableVisible10 = true;
                    replyForm = JSON.parse(JSON.stringify(item));
                  "
                  >编辑</span
                >
                <span
                  style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px"
                  @click="toDelete(item.id, 'reply')"
                  >删除</span
                >
              </div>
            </div>
          </div>
          <div class="paginationVue">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="limit"
              @current-change="pageChange"
            ></el-pagination>
          </div>
        </div>
      </template>

      <!-- 会话超时 -->
      <template v-if="current === 3">
        <div class="flex">
          <span>超时自动关闭会话</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-switch
              v-model="info.isConversationTimeoutAutoClose"
              active-color="#13ce66"
              inactive-color="#ececec"
              :width="40"
            ></el-switch>
            <div style="padding: 20px 0; color: #999">
              开启后，在设置的时间内客户没有新消息产生，系统将自动关闭会话。
            </div>
          </div>
        </div>
        <div class="flex align-center">
          <span>超时时长</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-input placeholder="超时时长" resize="none" v-model="info.conversationTimeout" style="width: 50%">
            </el-input>
          </div>
        </div>
        <div class="flex align-center" style="margin-top: 30px">
          <span>提示</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              resize="none"
              :rows="5"
              v-model="info.conversationTimeoutMsg"
              style="width: 50%"
            >
            </el-input>
          </div>
        </div>

        <div class="submit" @click="updateFun">保存</div>
      </template>

      <!-- 客服评价 -->
      <template v-if="current === 4">
        <div class="flex">
          <span>客户评价</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-switch
              v-model="info.isOpenUserFeedback"
              active-color="#13ce66"
              inactive-color="#ececec"
              :width="40"
            ></el-switch>
            <div style="padding: 20px 0; color: #999">开启后，客户可在会话结束时对客服的服务做出评价。</div>
          </div>
        </div>
        <div class="flex align-center"  style="margin-top: 30px">
          <span>邀请评价文案</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-input placeholder="邀请评价文案" resize="none" v-model="info.userFeedbackBeforeMsg" style="width: 50%">
            </el-input>
          </div>
        </div>
        <div class="flex align-center" style="margin-top: 30px">
          <span>评价回复文案</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              resize="none"
              :rows="5"
              v-model="info.userFeedbackAfterMsg"
              style="width: 50%"
            >
            </el-input>
          </div>
        </div>

        <div class="submit" @click="updateFun">保存</div>
      </template>

    <!-- 更多设置 -->
    <template v-if="current === 5">
        <div class="flex">
          <span>分配模式</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-radio v-model="info.conversationAssignMode" :label="1">接待余量分配</el-radio>
            <el-radio v-model="info.conversationAssignMode" :label="2">平均分配</el-radio>
          </div>
        </div>
        <div class="flex" style="margin-top: 30px;">
          <span>排队分配规则</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-radio v-model="info.queueAssignRule" :label="1">按接入时间由早到晚</el-radio>
            <el-radio v-model="info.queueAssignRule" :label="2">按接入时间由晚到早</el-radio>
          </div>
        </div>

        <div class="flex align-center" style="margin-top: 30px;">
          <span>可同时接入数量</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-input placeholder="超时时长" resize="none" v-model="info.assistantConcurrentNumber" style="width: 50%">
            </el-input>
          </div>
        </div>
        <div class="flex align-center" style="margin-top: 30px">
          <span>客服上班时间</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-time-select
                v-model="info.assistantWorkTime"
                :picker-options="{
                    start: '00:30',
                    step: '00:10',
                    end: '23:59'
                }"
                placeholder="上班时间">
                </el-time-select>
                <el-time-select
                v-model="info.assistantOffWorkTime"
                style="margin-left: 20px;"
                :picker-options="{
                    start: '00:30',
                    step: '00:10',
                    end: '23:59'
                }"
                placeholder="下班时间">
                </el-time-select>
          </div>
        </div>

        <div class="flex" style="margin-top: 30px">
          <span>允许客服拉黑客户</span>
          <div class="flex-1" style="padding-left: 15px">
            <el-switch
              v-model="info.isAllowAssistantBlack"
              active-color="#13ce66"
              inactive-color="#ececec"
              :width="40"
            ></el-switch>
            <div style="padding: 20px 0; color: #999">开启后，客服可拉黑客户，拉黑后客户无法接入会话。</div>
          </div>
        </div>

        <div class="submit" @click="updateFun">保存</div>
      </template>
    </div>

    <!-- 常见问题 -->
    <el-dialog :title="title" :visible.sync="dialogTableVisible" width="500px" top="30vh">
      <div class="dialogVue">
        <div style="display: flex; align-items: center">
          <div class="label">问题</div>
          <el-input style="flex: 1; margin-left: 20px" placeholder="问题" v-model="querForm.title"></el-input>
        </div>
        <div style="display: flex; align-items: center; margin-top: 20px">
          <div class="label">回答</div>
          <el-input
            type="textarea"
            resize="none"
            :rows="5"
            style="flex: 1; margin-left: 20px"
            placeholder="回答"
            v-model="querForm.content"
          ></el-input>
        </div>
        <div style="display: flex; align-items: center; margin-top: 20px">
          <div class="label">排序</div>
          <el-input
            type="number"
            style="flex: 1; margin-left: 20px"
            placeholder="排序"
            v-model="querForm.sort"
          ></el-input>
        </div>
        <div class="btnVue">
          <div class="btn" @click="dialogTableVisible = false">取消</div>
          <div class="btn" @click="quesFun()">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 快捷回复 -->
    <el-dialog :title="title" :visible.sync="dialogTableVisible10" width="500px" top="30vh">
      <div class="dialogVue">
        <div style="display: flex; align-items: center">
          <div class="label">关键词</div>
          <el-input style="flex: 1; margin-left: 20px" placeholder="关键词" v-model="replyForm.title"></el-input>
        </div>
        <div style="display: flex; align-items: center; margin-top: 20px">
          <div class="label">回答</div>
          <el-input
            type="textarea"
            resize="none"
            :rows="5"
            style="flex: 1; margin-left: 20px"
            placeholder="回答"
            v-model="replyForm.content"
          ></el-input>
        </div>
        <div class="btnVue">
          <div class="btn" @click="dialogTableVisible10 = false">取消</div>
          <div class="btn" @click="replyFun()">确定</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  serviceSettingInfo,
  updateSettingInfo,
  getQuestion,
  addQuestion,
  editQuestion,
  deleteQuestion,
  getReply,
  addReply,
  editReply,
  deleteReply,
} from '@/api/msg';
export default {
  data() {
    return {
      current: 0,
      info: {
        assistantConcurrentNumber: 1,
        assistantOffWorkTime: '',
        assistantWorkTime: '',
        conversationAssignMode: 1,
        conversationTimeout: 30,
        conversationTimeoutMsg: '',
        createTime: '',
        firstSentence: '',
        id: 1,
        isAllowAssistantBlack: true,
        isConversationTimeoutAutoClose: false,
        isOpenFirstSentence: true,
        isOpenOffWorkReminder: true,
        isOpenQueueReminder: true,
        isOpenUserFeedback: true,
        offWorkReminder: '',
        queueAssignRule: 1,
        queueReminder: '',
        updateTime: '',
        userFeedbackAfterMsg: '',
        userFeedbackBeforeMsg: '',
      },
      startTime: '',
      endTime: '',
      limit: 20,
      page: 1,
      total: 0,
      keywords: '',
      quList: [],
      dialogTableVisible: false,
      dialogTableVisible10: false,
      title: '',
      querForm: {
        id: '',
        content: '',
        title: '',
        sort: 0,
      },
      replyList: [],
      replyForm: {},
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    change(index) {
      this.current = index;
      this.page = 1
      if (index == 1) this.getQuestionList();
      if (index == 2) this.getReplyList();
    },
    getInfo() {
      serviceSettingInfo().then((res) => {
        this.info = res;
        console.log('客服设置信息', res);
      });
    },
    updateFun() {
      updateSettingInfo(this.info).then((res) => {
        this.$message.success('保存成功');
        this.getInfo();
      });
    },
    getQuestionList() {
      getQuestion({
        startTime: this.startTime,
        endTime: this.endTime,
        limit: this.limit,
        page: this.page,
        keywords: this.keywords,
      }).then((res) => {
        console.log(res);
        this.quList = res.list;
        this.total = res.total;
        console.log('常见问题列表', this.quList);
      });
    },
    quesFun() {
      console.log(this.querForm);
      if (this.querForm.id) {
        editQuestion(this.querForm).then((res) => {
          this.dialogTableVisible = false;
          this.$message.success('编辑成功');
          this.querForm = {};
          this.page = 1;
          this.getQuestionList();
        });
      } else {
        addQuestion(this.querForm).then((res) => {
          this.dialogTableVisible = false;
          this.$message.success('添加成功');
          this.querForm = {};
          this.page = 1;
          this.getQuestionList();
        });
      }
    },
    toDelete(id, type) {
      if (type == 'question') {
        this.$confirm('此操作将删除该常见问题, 是否继续?', '删除常见问题', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteQuestion({ id: id }).then((res) => {
            this.$message.success('删除成功');
            this.querForm = {};
            this.page = 1;
            this.getQuestionList();
          });
        });
      }
      if (type === 'reply') {
        this.$confirm('此操作将删除该快捷回复, 是否继续?', '删除快捷回复', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteReply({ id: id }).then((res) => {
            this.$message.success('删除成功');
            this.querForm = {};
            this.page = 1;
            this.getReplyList();
          });
        });
      }
    },
    pageChange(e) {
      console.log(e);
      this.page = e;
      if(this.current==1) this.getQuestionList();
      if(this.current==2) this.getReplyList();
    },
    getReplyList() {
      getReply({
        startTime: this.startTime,
        endTime: this.endTime,
        limit: this.limit,
        page: this.page,
        keywords: this.keywords,
      }).then((res) => {
        console.log(res);
        this.replyList = res.list;
        this.total = res.total;
        console.log('常见快捷列表', this.replyList);
      });
    },
    replyFun() {
      console.log(this.replyForm);
      if (this.replyForm.id) {
        editReply(this.replyForm).then((res) => {
          this.dialogTableVisible10 = false;
          this.$message.success('编辑成功');
          this.replyForm = {};
          this.page = 1;
          this.getReplyList();
        });
      } else {
        addReply(this.replyForm).then((res) => {
          this.dialogTableVisible10 = false;
          this.$message.success('添加成功');
          this.replyForm = {};
          this.page = 1;
          this.getReplyList();
        });
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.settingPage {
  width: 100%;
  height: calc(100vh - 186px);
  background: #fff;
  display: flex;
  .menuVue {
    width: 200px;
    height: calc(100vh - 186px);
    border-right: 1px solid #f5f5f5;
    .menu {
      width: 200px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
    }
    .active {
      background: #f6f9fe;
    }
  }
  .menuContent {
    flex: 1;
    height: calc(100vh - 186px);
    padding: 20px;
    .flex {
      display: flex;
    }
    .flex-1 {
      flex: 1;
    }
    .flex-between {
      display: flex;
      justify-content: space-between;
    }
    .align-center {
      align-items: center;
    }
    .btn {
      width: 60px;
      height: 32px;
      background: #0256ff;
      border-radius: 4px;
      text-align: center;
      line-height: 32px;
      color: #fff;
      margin-left: 15px;
      cursor: pointer;
    }
    .add {
      width: 120px;
      height: 32px;
      background: #0256ff;
      border-radius: 4px;
      text-align: center;
      line-height: 32px;
      color: #fff;
      cursor: pointer;
    }
    .submit {
      width: 260px;
      height: 40px;
      background: #0256ff;
      border-radius: 4px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      margin-left: 15px;
      cursor: pointer;
      margin-top: 20px;
    }
  }
  .tableList {
    width: 100%;
    height: calc(100vh - 186px - 112px);
    .thVue {
      width: 100%;
      display: flex;
      height: 70px;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .th {
        flex: 1;
        color: #333333;
        font-weight: 600;
        text-align: center;
      }
    }
    .tdVue {
      width: 100%;
      height: calc(100vh - 186px - 112px - 70px);
      overflow-y: scroll;
      .tdItem {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .td {
          flex: 1;
          text-align: center;
        }
      }
    }
    .tdVue::-webkit-scrollbar {
      width: 0;
    }
    .paginationVue {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .dialogVue {
    padding-bottom: 30px;
    .label {
      color: #999;
    }
    ::v-deep .el-input__inner {
      height: 40px;
    }
  }
  .btnVue {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    .btn {
      width: 66px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin-left: 15px;
      cursor: pointer;
    }
    .btn:nth-child(1) {
      color: #333;
      border: 1px solid #f5f5f5;
      border-radius: 4px;
    }
    .btn:nth-child(2) {
      color: #fff;
      background: #0256ff;
      border-radius: 4px;
    }
  }
}
</style>